import React,{Component} from  'react'
import './login.less'
import {Row,Col} from 'antd'
import { Form, Icon, Input, Button } from 'antd';
import {connect} from 'react-redux'
import {login} from "./redux/user.redux";
import {Redirect} from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'

const history = createHistory()
const { location } = history

const FormItem = Form.Item;

class Login extends Component{
    constructor(props){
        super(props);
        this.state ={
            username:'',
            password:''
        }
    }
    handleChange(key,e){
        this.setState({
            [key]:e.target.value
        })
    }
    componentDidMount() {
    }
    handleSubmit = (e) => {
        e.preventDefault();
        console.log(this.state)
         this.props.loginDefault({username:this.state.username, password:this.state.password})
    }
    render(){
        return (
            <div>
                <Row>
                    {(this.props.redirectTo&&this.props.redirectTo!='/login')? <Redirect to={this.props.redirectTo} />:null}
                    <Col span={12}  offset={6}>
                        <div style={{background:'white',marginTop:150,padding:10}}>
                            <div><h3 style={{lineHeight:'50px'}}>欢迎登录 - MMALL管理系统</h3></div>
                            {this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null}
                            <Form  onSubmit={this.handleSubmit}>
                                <FormItem>
                                    <Input onChange={this.handleChange.bind(this,'username')} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                                </FormItem>
                                <FormItem>
                                    <Input onChange={this.handleChange.bind(this,'password')}  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                                </FormItem>
                                <FormItem >
                                    <Button style={{margin:'0 auto',display:'block'}}
                                            type="primary"
                                            htmlType="submit"
                                    >
                                        登 录
                                    </Button>
                                </FormItem>
                            </Form>

                        </div>
                    </Col>
                </Row>
            </div>

        )
    }
}
const WrappedHorizontalLoginForm = Form.create()(Login);

function mapStateToProps(state){
    return state.user;
}
const mapDispatchToProps = (dispatch) => ( { // <- forgot the wrapping with ( here
    loginDefault: (data) => {
        dispatch(login(data))
    }
} )
export default connect(mapStateToProps, mapDispatchToProps)(WrappedHorizontalLoginForm);
